<template>
  <div class="home">
    <input type="text" v-model="title" />
    <button @click="add">添加</button>

    <van-tabs v-model="active">
      <van-tab
        v-for="(item, index) in $store.state.list"
        :key="index"
        :title="item.title"
      ></van-tab>
    </van-tabs>

    <ul class="con">
      <button @click="sorttime">时间排序</button>
      <li
        v-for="(item, index) in $store.state.list[this.active].con"
        :key="index"
      >
        <input
          v-if="index == editIndex"
          type="text"
          v-model="item.name"
          @blur="editIndex = -1"
        />
        <span v-else style="margin-right:50px" @dblclick="edit(index)"
          >{{ item.name }}
        </span>
        <span style="margin-right:50px">{{ item.time | filtime }}</span>
        <a href="#" @click="remove(index)">x</a>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      active: 0,
      title: "",
      editIndex: -1,
    };
  },
  methods: {
    add() {
      if (this.title == "") {
        alert("不能为空");
        return false;
      }
      //判空

      this.$store.commit("add", { active: this.active, title: this.title });
      this.title = "";
    },
    remove(index) {
      this.$store.commit("remove", { active: this.active, index: index });
    },

    //删除 效果 需要把active（代表当前是在电影还是综艺还是哪个模块），和下标index 代表在这个模块删除哪个数据 都传过去才能删除
    sorttime() {
      this.$store.commit("sort", { active: this.active });
    },
    edit(i) {
      console.log(i);
      this.editIndex = i;
    },
  },
  filters: {
    filtime(val) {
      return new Date(val).toLocaleString();
    },
  },
};
</script>
<style lang="scss">
.home {
  width: 500px;
  margin: 0 auto;
}
.con {
  li {
    display: flex;
    // justify-content: space-between;
  }
  a {
    display: none;
  }
}
.con li:hover {
  background: chocolate;
  a {
    display: inline-block;
  }
}
</style>
